<template>
  <div class="broadband">
	   <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
       <div class="heading">宽带业务：<span class="redTitle">宽带用户发展情况</span></div>
       <div class="content clearfix">
         <div class="contentLeft">
         <div class="contentflex">
           <div class="growthRate">
             <div class="marg weightFont buleBg"><span class="fl">01</span><span>宽带新增</span></div>
             <div class="marg"><span class="normalFont">{{areaName}}累计新增{{newIncreaseData.totalIncrease}}万户</span></div>
             <div class="marg"><span class="normalFont">同比{{newIncreaseData.IncreaseYearOnYear}}</span></div>
             <div class="marg"><span class="normalFont">年度新增完成率{{newIncreaseData.newIncreaseFinishRate}}%</span></div>
           </div>
           <div class="growthRate">
             <div class="marg weightFont redBg"><span class="fl">02</span><span >宽带净增</span></div>
             <div class="marg"><span class="normalFont">{{areaName}}累计净增{{netGrowthData.netGrowthTotalIncrease}}万户</span></div>
             <div class="marg"><span class="normalFont">年度净增完成率{{netGrowthData.netGrowthFinishRate}}%</span></div>
           </div>
          <div class="growthRate">
             <div class="marg weightFont grayBg"><span class="fl">03</span><span >宽带融合率</span></div>
             <div class="marg"><span class="normalFont">{{areaName}}宽带融合{{fusionRateData.fusionRateTotalIncrease}}%</span></div>
             <div class="marg"><span class="normalFont">环比上月{{fusionRateYearOnYear}}</span></div>
           </div>
          </div>
         </div>
         <div class="echartBox">
         <div class="contentRight" style="width: 445px;flex-shrink: 0">
           <div class="topEchart">
             <div class="contentTitle">宽带月新增趋势</div>
             <newBroadTrend :newIncreaseTrendData='newIncreaseTrendData'></newBroadTrend>
           </div>
           <div class="centerEchart">
             <div class="contentTitle">宽带月净增趋势</div>
             <netBroadIncreaseTrend :newGrowthTrendData="newGrowthTrendData"></netBroadIncreaseTrend>
           </div>
           <div class="bottomEchart">
             <div class="contentTitle">宽带融合率月环比趋势</div>
             <newFuseTrend :fuseGrowtTrendData="fuseGrowtTrendData"></newFuseTrend>
           </div>
         </div>
         <div class="contentRight"  style="flex:1">
           <div class="topEchart" style="padding: 10px 0">
             <div class="contentTitle"></div>
             <broadbandAddCity :addCityEchart='addCityEchart' :time="year"></broadbandAddCity>
             <div>
             <div class="lackData">
                <span class="title">新增(万户)</span>
                <ul class="gapOfTitle" ref="addCity">
                  <li v-for="(item,index) in addEchartData" :key="index" :style="{'width':widthChange+'px'}">{{item}}</li>
                </ul>
             </div>
           </div>
           </div>
           <div class="centerEchart">
             <div class="contentTitle"></div>
             <broadbandNetGrowth :netGrowthEchart="netGrowthEchart"></broadbandNetGrowth>
             <div>
               <div class="lackData">
                  <span class="title">净增(万):</span>
                  <ul class="gapOfTitle" ref="netGrowt">
                    <li v-for="(item,index) in netGrowthliData" :key="index" :style="{'width':widthChange1+'px'}">{{item}}</li>
                  </ul>
               </div>
             </div>
           </div>
          <div class="bottomEchart">
             <div class="contentTitle"></div>
             <development :fusionRateEchart="fusionRateEchart"></development>
             <div>
               <div class="lackData">
                  <span class="title">融合率</span>
                  <ul class="gapOfTitle fusGap" ref="fusGap">
                    <li v-for="(item,index) in fusionRateListData" :key="index" :style="{'width':widthChange2+'px'}">{{item}}</li>
                  </ul>
               </div>
             </div>
           </div>
         </div>
         </div>
       </div>
  </div>
</template>

<script>
  import newBroadTrend from "@/views/budget/showPdf/showEchart/newBroadTrend";
  import netBroadIncreaseTrend from "@/views/budget/showPdf/showEchart/netBroadIncreaseTrend";
  import newFuseTrend from "@/views/budget/showPdf/showEchart/newFuseTrend";
  import broadbandAddCity from "@/views/budget/showPdf/showEchart/broadbandAddCity";
  import broadbandNetGrowth from "@/views/budget/showPdf/showEchart/broadbandNetGrowth";
  import development from "@/views/budget/showPdf/showEchart/broadbandDevelopment";
  import { getSessionStorage } from "@/common/js/storage";
  import { $budgetAPI } from "@/api";
    export default {
        name: "branchIncome",
        components:{
          broadbandAddCity,
          broadbandNetGrowth,
          development,
          newBroadTrend,
          netBroadIncreaseTrend,
          newFuseTrend
        },
        props: ["areaId", "month"],
        data(){
          return{
            newIncreaseData:{},
            netGrowthData:{},
            addCityEchart:{},
            netGrowthEchart:{},
            fusionRateEchart:{},
            addEchartData:[],
            netGrowthliData:[],
            fusionRateData:{},
            fusionRateListData:[],
            widthChange:'',
            widthChange1:'',
            widthChange2:'',
            areaName:'',
            newIncreaseTrendData:{},
            newGrowthTrendData:{},
            fuseGrowtTrendData:{},
            leftLength:0,
            rightLength:0,
            fusionRateYearOnYear:'',
            time: '',
            year: "",
          }
        },
        methods:{
        getBroadbandServiceData(){
          var that = this

          $budgetAPI.getBroadbandServiceData(
          {areaId:this.areaId,
            accMonth:this.month},
           res => {
            if(res && res.code == 0 ){
             that.newIncreaseData = res.content.newIncreaseData
             that.netGrowthData = res.content.netGrowthData
             that.fusionRateData = res.content.fusionRateData
             that.year = res.content.accMonth.substr(0, 4)
             if(res.content.fusionRateData.fusionRateYearOnYear == null){
               that.fusionRateYearOnYear = ''
              }else{
                if(res.content.fusionRateData.fusionRateYearOnYear>0){
                  that.fusionRateYearOnYear = '增加'+res.content.fusionRateData.fusionRateYearOnYear
                }
                 else{
                   that.fusionRateYearOnYear = '降低'+res.content.fusionRateData.fusionRateYearOnYear
                }
              }
             that.areaName = res.content.area.areaName
             that.rightLength = res.content.newIncreaseData.newIncreaseDataList.length
             that.leftLength = res.content.newIncreaseData.newIncreaseTrendData.length>5?res.content.newIncreaseData.newIncreaseTrendData.length:5
             let netObj={
               xAxis: [],
               yAxis: [],
             }
             res.content.newIncreaseData.newIncreaseTrendData.map((item,index) =>{
               netObj.xAxis[index] = item.month.substring(4,5)>0?item.month.substring(4,6)+'月':item.month.substring(5,6)+'月'
               netObj.yAxis[index] = item.data
             })
             that.newIncreaseTrendData = netObj

             let newGrowthObj={
               xAxis: [],
               yAxis: [],
             }
             res.content.netGrowthData.netGrowthTrendData.map((item,index) =>{
               newGrowthObj.xAxis[index] = item.month.substring(4,5)>0?item.month.substring(4,6)+'月':item.month.substring(5,6)+'月'
               newGrowthObj.yAxis[index] = item.data
             })
             that.newGrowthTrendData = newGrowthObj

             let fuseGrowthObj={
               xAxis: [],
               yAxis: [],
             }
             res.content.fusionRateData.fusionTrendData.map((item,index) =>{
               fuseGrowthObj.xAxis[index] = item.month.substring(4,5)>0?item.month.substring(4,6)+'月':item.month.substring(5,6)+'月'
               fuseGrowthObj.yAxis[index] = item.data
             })
             that.fuseGrowtTrendData = fuseGrowthObj
             let obj={
              xAxis: [],
              yAxis: [],
              y1Axis:[],
             };
             res.content.newIncreaseData.newIncreaseDataList.map((item,index) =>{
               obj.xAxis[index] = item.areaName
               obj.yAxis[index] = item.finishRate
               obj.y1Axis[index] = item.yearOnYear
               that.addEchartData[index] = item.data
             })
            //  debugger
             that.addCityEchart = obj
             let obj1={
              xAxis: [],
              yAxis: [],
             };
             // res.content.netGrowthData.newGrowthDataList.sort((a,b) =>{
             //   return b.finishRate-a.finishRate
             // })
             res.content.netGrowthData.newGrowthDataList.map((item,index) =>{
               obj1.xAxis[index] = item.areaName
               that.netGrowthliData[index] = item.data
               obj1.yAxis[index] = item.finishRate
             })
             that.netGrowthEchart = obj1

             let obj2={
              xAxis: [],
              yAxis: [],
             };
             res.content.fusionRateData.fusionRateDataList.map((item,index) =>{
               obj2.xAxis[index] = item.areaName
               that.fusionRateListData[index] = item.data
               obj2.yAxis[index] = item.yearOnYear

             })
             that.fusionRateEchart = obj2
            }
           this.$nextTick(function () {
                  this.width()
                 })
          },
           err => {}
           )
        },
        width(){
          this.widthChange =(this.$refs.addCity.clientWidth-1) /this.addEchartData.length;
          this.widthChange1 =(this.$refs.netGrowt.clientWidth-1) /this.netGrowthliData.length;
          this.widthChange2 = (this.$refs.fusGap.clientWidth-1) / this.fusionRateListData.length;
        },

        },
    }
</script>

<style lang="scss" scoped>
.broadband{
   padding: 20px;
   border:1px solid #dee5f3;
   border-radius:5px;
   margin-top: 20px;
   position:relative;
   .logoBg{
     position: absolute;
     right:20px;
     top:20px;
   }
   .heading{
     font-size: 22px;
     font-weight: 700;
     text-align: center;
     padding-bottom: 40px;
     .redTitle{
       color:#c00000
     }
   }
   .content{
     display: flex;
     .content.clearfix:after,content:before{
       content: "";
       display: table;
     }
     .content.clearfix:after{
       clear: both;
     }
     .content.clearfix{
       *zoom: 1;
     }
     .contentLeft{
        width: 250px;
        flex-shrink: 0;
       .contentflex{
         display:flex;
         flex-direction:column;
         height: 100%;
         .growthRate{
           margin-bottom: 40px;
           // flex:1;
           width: 100%;
           height:200px;
           .marg{
             margin-bottom: 10px;
             width: 100%;
             .normalFont{
               font-size: 16px;
             }
             .normalBuleFont{
               font-size: 16px;
               color:#5585bf;
             }
             .normalRedFont{
               font-size: 16px;
               color:#c00000;
             }
             .weightRedlFont{
               font-size: 16px;
               color:#c00000;
               font-weight: 700;
             }
           }
           .weightFont{
             font-size: 16px;
             font-weight: 700;
             color:#fff;
             width: 100%;
             text-align: center;
             padding: 5px;
             border-top-left-radius: 10px;
             border-top-right-radius: 10px;
             .fl{
               float:left;
             }
             &.buleBg{
               background:rgb(79,128,188);
             }
             &.redBg{
               background: #c00000;
             }
             &.grayBg{
               background:rgb(155,186,88);
             }
           }
         }
       }

     }
     .echartBox{
        // width: 77%;
        display: flex;
        flex:8;
     .contentRight{
      display: flex;
      flex-direction: column;
      &:first-child{
       margin:0 10px;
       .topEchart,.centerEchart{
         &:before{
           content:"";
           position:absolute;
           left:25%;
           top:-2px;
           width:50%;
           height:2px;
           background-color:#fff
         }
       }
       .bottomEchart{
         &:before{
           content:"";
           position:absolute;
           left:25%;
           top:-2px;
           width:50%;
           height:2px;
           background-color:#fff
         }
       }
       }
       .topEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 20px 0;
           display: inline-block;
           flex:1;
           // &:before{
           //   content:"";
           //   position:absolute;
           //   left:20%;
           //   top:-2px;
           //   width:60%;
           //   height:2px;
           //   background-color:#fff
           // }
       }
       .centerEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 10px 0;
           display: inline-block;
           margin:20px 0;
            flex:1;
           // &:before{
           //   content:"";
           //   position:absolute;
           //   left:20%;
           //   top:-2px;
           //   width:60%;
           //   height:2px;
           //   background-color:#fff
           // }
       }
       .bottomEchart{
           width: 100%;
           position: relative;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 20px 0;
           display: inline-block;
             flex:1;
           // &:before{
           //   content:"";
           //   position:absolute;
           //   left:20%;
           //   top:-2px;
           //   width:60%;
           //   height:2px;
           //   background-color:#fff
           // }
       }
       .contentTitle{
           position: absolute;
           left: 50%;
           top: -14px;
           transform: translateX(-50%);
           font-size: 18px;
           font-weight: 700;
           text-align: center;
           width:60%;
           .redTitle{
             color:#e46c11;
           }
        }
        .lackData{
           padding: 0 20px 0 60px;
           margin-top: 10px;
          .title{
            width: 55px;
            display: block;
            vertical-align: top;
            float: left;
            margin-left: -55px;
            text-align: center;
            font-size: 11px;
          }
          .gapOfTitle{
             display: inline-block;
              width: 100%;
               li{
                 float:left;
                 border:1px solid #5585bf;
                 color:#5585bf;
                 text-align: center;
                 height: 18px;
                 line-height: 18px;
                 // width:percentage(1/12);
               }
            &.fusGap{
              // li{
              //   width:percentage(1/9);
              // }
            }
          }

        }
     }
    }
   }
}
</style>
